<template>
	<div id="forget">
		<img src="../../static/img/login-agent.png"/>
		<div class="login_form">
			<h3>重置密码</h3>
			<div class="input">
				<img src="../../static/img/login-1.png"/>
				<input type="text" placeholder="请输入手机号" v-model="phone" />
			</div>
			<div class="validate">
				<div>
					<img src="../../static/img/login-2.png"/>
					<input type="text" placeholder="请输入验证码" v-model="picCode"/>
				</div>
				<div class="code" @click="refreshCode">
				    <identify :identifyCode="identifyCode"></identify>
				</div>
				<!--<img src="../../static/img/validate.png"/>-->
			</div>
			<div class="validate">
				<div>
					<img src="../../static/img/login-3.png"/>
					<input type="text" v-model="code" placeholder="请输入手机验证码" />
				</div>
				<input v-show="verificationShow" @click="countDown" type="button" value="获取验证码" />
				<input v-show="!verificationShow" type="button" v-model="getVerification" />
			</div>
			<div class="input">
				<img src="../../static/img/login-5.png"/>
				<input type="password" placeholder="请输入密码" v-model="password" />
			</div>
			<div class="input">
				<img src="../../static/img/login-6.png"/>
				<input type="password" v-model="passwordAgain" placeholder="请再次输入密码" />
			</div>
			<input id="sub" @click="forget" type="button" value="确定" />
			<div class="forget">
				<router-link to="/IDoperation/login" >返回登录</router-link>
			</div>
		</div>
	</div>
</template>

<script>
export default{
	name:'forget',
	data:function(){
		return{
			phone: '',//手机号
			code: '',//验证码
			getVerification: '60s后重新获取',//获取验证码
			keyCode:'',//加密验证码
			password: '',//密码
			passwordAgain: '',//重复密码
			verificationShow: true,//获取验证码切换
			identifyCodes: "1234567890",
     		identifyCode: "",
     		picCode:'',
		}
	},
	mounted: function() {
	    this.identifyCode = "";
	    this.makeCode(this.identifyCodes, 4);
	},
	methods:{
		forget:function(){
			var _this = this;
			if(_this.picCode!=_this.identifyCode){
				_this.$alert("3","验证码输入错误");
				_this.refreshCode();
			}else if(_this.password!=_this.passwordAgain){
				_this.$alert("3","密码不一致");
			}else{
				var postData = _this.$qs.stringify({
					phone:_this.phone,
					code:_this.code,
					keyCode:_this.keyCode,
					password:_this.password,
				});
				_this.$axios.post('agent/autho/public/forget',postData).then(function(res){
					var data = res.data;
					if(data.message=="succ"){
						_this.$alert("1",data.result,function(){
							_this.$router.push({path:'/IDoperation/login'});
						});
					}else{
						_this.$alert("2",data.result);
					}
				}).catch(function (error) {
				    console.log(error);
				});
			}
		},
		//--------获取验证码倒计时-------
		countDown:function(){
			var time = 60;
			var _this = this;
			if(!/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/.test(_this.phone)){
				_this.$alert("3","手机格式不正确");
				return;
			}
			_this.verificationShow = false;
			_this.getVerification = '60s后重新获取';
			_this.phoneCode();
			var Time = setInterval(function(){
				if(time == 1){
					_this.verificationShow = true;
					time = 60;
					clearTimeout(Time);
				}else{
					time -- ;
					_this.getVerification = time + 's后重新获取';
				}
			},1000);
			
		},
		phoneCode:function(){
			var _this = this;
			let postData = _this.$qs.stringify({
				phone:_this.phone,
			});
			_this.$axios.post('/sms/public/phoneCode',postData).then(function(res){
				if(res.data.message=="succ"){
					_this.keyCode = res.data.result;
					_this.$alert("1","发送成功");
				}else{
					_this.$alert("2","发送失败");
					console.log(res.data.result);
				}   
			}).catch(function (error) {
			    console.log(error);
			});
		},
		randomNum(min, max) {
	      return Math.floor(Math.random() * (max - min) + min);
	    },
	    refreshCode() {
	      this.identifyCode = "";
	      this.makeCode(this.identifyCodes, 4);
	    },
	    makeCode(o, l) {
	      for (let i = 0; i < l; i++) {
	        this.identifyCode += this.identifyCodes[
	          this.randomNum(0, this.identifyCodes.length)
	        ];
	      }
	    }
	}
}
</script>

<style scoped>
.validate .code {
  margin: 400px auto;
  width: 114px;
  height: 40px;
  border: 1px solid red;
}
.code div{
  padding: 0 !important;
}
#forget{
	padding-top: 20px;
	width: 1000px;
	margin: 0 auto;
	height: calc(100% - 117px);
	min-height: 603px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
}
#forget>img{
	height: 410px;
	display: block;
}
.login_form{
	width: 350px;
	background-color: #fff;
	box-shadow: 0 0 10px #CCCCCC;
	padding: 50px 0;
}
.login_form h3{
	color: #FF464E;
	font-size: 20px;
	text-align: center;
}
.input input{
	border: none;
	background-color: rgba(0,0,0,0);
	width: 230px;
	height: 100%;
}
.input,.validate{
	width:80%;
	margin: 0 auto;
	display: flex;
	align-items: center;
	background-color: #FFFFFF;
	padding-left: 10px;
	margin-top: 20px;
	border: 1px solid #EEEEEE;
	height: 34px;
	box-sizing: border-box;
}
.validate{
	border: none;
	padding-left: 0;
}
.input img,.validate div img{
	height: 20px;
	width: 20px;
	margin-right: 10px;
}
.validate>img{
	width: 110px;
	height: 100%;
	display: block;
}
.validate div{
	display: flex;
	align-items: center;
	height: 100%;
	padding-left: 10px;
	border: 1px solid #EEEEEE;
	box-sizing: border-box;
}
.validate{
	justify-content: space-between;
	overflow: hidden;
	-webkit-user-select: none;
}
.validate input[type="text"]{
	width: 120px;
	border: none;
	background-color: rgba(0,0,0,0);
	height: 100%;
}
.validate input[type="button"]{
	width: 110px;
	height: 100%;
	border: 1px solid #FF464E;
	color: #FF464E;
	background-color: #FFFFFF;
}
.forget{
	width: 80%;
	margin: 0 auto;
	display: flex;
	justify-content: flex-end;
	font-size: 12px;
	margin-top: 10px;
	color: #9F9F9F;
}
.forget a{
	display: inline-block;
	color: #3ea4ed;
}
.agreement{
	width: 80%;
	margin: 0 auto;
	margin-top: 10px;
}
.agreement .el-checkbox{
	font-size: 12px;
	color: #9F9F9F;
}
.agreement .el-checkbox__label{
	padding-left: 5px;
}
.agreement a{
	color: #3ea4ed;
}
#sub{
	width: 80%;
	display: block;
	margin: 0 auto;
	background-color: #FF464E;
	color: #FFFFFF;
	font-size: 16px;
	height: 36px;
	border: none;
	border-radius: 50px;
	margin-top: 20px;
}
</style>